<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:myComponents="http://java.sun.com/jsf/composite/myComponents">
<h:head>
	<title>Exercises: Composite Components</title>
	
	<h:outputStylesheet name="anythingslider.css" library="css" />
	<h:outputScript library="js" name="jquery.anythingslider.js"/>
	<h:outputStylesheet name="styles.css" library="css" />
	<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
</h:head>
<h:body>
	<table border="5" align="center">
		<tr>
			<th class="title">Exercises: Composite Components</th>
		</tr>
	</table>
	<br />
	
	<fieldset>
		<legend>My Slider</legend>
		<myComponents:mySlider customer="#{testBean.larry}" />
	</fieldset>
	
	<fieldset>
		<legend>Basic Composite Components</legend>
		<myComponents:test1 />
	</fieldset>
	<br />
	<fieldset>
		<legend>Composite Components with Attributes</legend>
		<myComponents:test2 message="Yaser" styleClass="red" />
	</fieldset>
	<br />
	<fieldset>
		<legend>Composite Components with Beans as Attributes</legend>
		<myComponents:customerInfo1 customer="#{testBean.larry}"
			styleClass="blue" />
	</fieldset>
	<br />
	<fieldset>
		<legend>Composite Components with Conditional Rendering</legend>
		<myComponents:showNumber number="-2" positiveStyleClass="blue"
			negativeStyleClass="red" />
		<myComponents:showNumber number="-1" positiveStyleClass="blue"
			negativeStyleClass="red" />
		<myComponents:showNumber number="0" positiveStyleClass="blue"
			negativeStyleClass="red" />
		<myComponents:showNumber number="1" positiveStyleClass="blue"
			negativeStyleClass="red" />
		<myComponents:showNumber number="2" positiveStyleClass="blue"
			negativeStyleClass="red" />
	</fieldset>
	<br />
	<fieldset>
		<legend>Images and Relative URLs</legend>
		<myComponents:customerInfo2 customer="#{testBean.larry}"
			styleClass="blue" />
	</fieldset>
	<br />



	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<hr />

</h:body>
</html>